<template>
	<view>
		<view class="head">
			<view>
				<text>水表号</text>
				<view >{{showInfo.sb_num}}</view>
			</view>
			<view>
				<text>抄表顺序</text>
				<view>01</view>
			</view>
		</view>
		
		<view class="til">
			<text>备注</text>
		</view>
		<view class="content">
			<input @input="noteMethod" v-model="note" class="note" type="text" placeholder="请输入" />
		</view>
		<view class="til">
			<text>定位</text>
			<view @click="location">定位</view>
		</view>
		<view class="content">
			<view class="same inp" >
				<input  type="text" v-model="form.address" placeholder="请输入" />
			</view>
			<view class="same">
				<text>地址</text>
				<view>{{showInfo.qy_dazhi}}</view>
			</view>
			<view class="same">
				<text>表况</text>
				<picker mode="selector" :range="['正常','异常']" @change="changeMeter">
					<!-- <input type="text" v-model="condition" placeholder="请输入" /> -->
					<view>{{condition}}</view>
					<!-- <uni-icons type=""></uni-icons> -->
				</picker>
			</view>
			<view class="same">
				<text>上次抄表日期</text>
				<view>{{lastData.cb_time}}</view>
			</view>
			<view class="same">
				<text>上次抄表水量</text>
				<view>15m³</view>
			</view>
			<view class="same">
				<text>正常用水范围</text>
				<view>20m³——30m³</view>
			</view>
			<view class="same">
				<text>倍率</text>
				<view>1</view>
			</view>
			<view class="same">
				<text>上次抄表数</text>
				<view>3600</view>
			</view>
			<view class="same">
				<text>本次抄表数</text>
				<input type="text" v-model="num" placeholder="请输入" />
			</view>
			<view class="same bot">
				<text>水量</text>
				<input type="text" v-model="shuiliang" placeholder="根据起止数自动计算" />
			</view>
		</view>
		<button id="confir" @click="confirm">确定</button>
	</view>
</template>
<script>
	// import getLocation from '../../utils/getLocation.js'
	import {ref,computed,reactive,toRefs,onMounted,getCurrentInstance} from 'vue'
	import {mapState,useStore} from 'vuex';
	export default{
		setup(){
			const {state,getters,commit,dispatch}=useStore();
			const {proxy}=getCurrentInstance();
			let data=reactive({
				form:{
					address:''
				},
				note:'',
				position:'',
				condition:'正常',
				num:'',
				shuiliang:'',
				time:'',
				getTime:'',
				lastData:{
					cb_time:'-',
				},
				//获取定位信息
				location:()=>{
					getLocation(data.form,'address');
					console.log(data.form)
					// uni.getLocation({
					// 	type: 'wgs84',
					// 	geocode:true,
					// 	highAccuracyExpireTime:16,
					// 	success: function (res) {
					// 		console.log(res);
							
					// 		console.log('当前位置的经度：' + res.longitude);
					// 		console.log('当前位置的纬度：' + res.latitude);
					// 		console.log(res.address);
					// 	}
					// });
				},
				changeMonth:(v)=>{
					return v<10?'0'+v:v;
				},
				//计算当前月的上一个月的日期
				getTime:()=>{
					let date=new Date();
					let year=date.getFullYear();
					let month=date.getMonth();
					let nowMonth=data.changeMonth(date.getMonth()+1);
					let day=date.getDate();
					if(month==0){  //表示当前为1月。计算上一月
						year--;
						month=12;
					};
					month=data.changeMonth(month);
					day=data.changeMonth(day);
					data.time=year+'-'+month;  //计算上个月的时间：2022-03
					data.upTime=year+'-'+nowMonth+"-"+day;  //计算现在的时间，这里有问题，month有问题
				},
				showInfo:computed(()=>state.chaobiao.info),
				
				changeMeter:(ev)=>{
					if(ev.detail.value==0){
						data.condition="正常";
					}else{
						data.condition="异常";
					}
					
				},
				confirm:()=>{
					proxy.$http({
						url:'/miniwatermeter/getAdd',
						method:'get',
						data:{
							id:data.showInfo.sb_num,
							time:data.upTime,
							beizhu:data.condition,
							dinwei:data.form.address,
							dushu:data.num,
							yongshui:data.shuiliang,
						}
					}).then((res)=>{
						//添加成功后返回
						console.log(res)
						if(res.data.code==200){
							uni.navigateBack({
								delta: 1
							})
							return
						};
						uni.showToast({
							title:'登记失败',
							icon: 'error',
							duration: 2000
						});
						data.note='';
						data.form.address='';
						data.condition='正常';
						data.num='';
						data.shuiliang='';
						
					})
				}
				
			}); 
			onMounted(()=>{
				data.getTime();
				proxy.$http({
					url:'/miniwatermeter/getlast',
					method:'get',
					data:{
						id:data.showInfo.sb_num,
						time:data.time+'%'
					}
				}).then((res)=>{
					if(res.data.data.length==0){  //如果为空，则返回
						uni.showToast({
							title: '没有上月数据',
							icon:'error',
							duration: 2000
						});
						return
					};
					console.log(res.data.data);
					data.lastData=res.data.data[0];
					data.lastData.cb_time=data.lastData.cb_time.substring(0,10)
					console.log(data.lastData)
				})

			})
			return  {...toRefs(data) };
		}
	}
</script>


<style lang="scss">
	page{
		padding: 0 25rpx;
		box-sizing: border-box;
		color: #666666;
	}
	.head{
		display: flex;
		border: 1px solid #E4E4E4;
	}
	.head>view{
		width: 350rpx;
		padding: 20rpx;
		box-sizing:border-box;
		display: flex;
		
		text{
			margin-right: 20rpx;
		}
	}
	.head>view:first-child{
		border-right: 1px solid #E4E4E4;
	}
	
	.til{
		padding: 10rpx 45rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		view{
			color: #0079FE;
		}
	}
	.content{
		padding: 20rpx;
		box-sizing: border-box;
		border: 1px solid #E4E4E4;
	}

	.content>input{
		padding:0 20rpx;
		box-sizing: border-box;
	}
	.same{
		padding: 20rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #E4E4E4;
		display: flex;
		text{
			width: 230rpx;
		}
		view{
			flex: 1;
		}
	}
	.same>picker,.same>input{
		flex: 1;
	}
	.inp{
		padding-top: 0;
	}
	.bot{
		padding-bottom: 0;
		border: none;
	}
	#confir{
		width: 200rpx;
		margin: 20rpx auto;
		color: #fff;
		background-color: #0079FE;
	}
	
</style>
